<template    >
  <div id="madmin">
    <div id="ad2">
      <el-header id="a1" :model="admin">
        <el-dropdown v-if="admin" id="adminname" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ admin.adminname }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人信息</el-dropdown-item>
            <el-dropdown-item command="b">切换账号</el-dropdown-item>
            <el-dropdown-item command="c"
              ><span @click="exit()">注销登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="!admin" id="adminname">
          <span class="el-dropdown-link">未登录</span>
        </el-dropdown>

        <div id="touxiang1">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/uploadimg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="admin.img" :src="admin.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div id="tousu">
          <i class="el-icon-bell"></i>
        </div>
        <div id="myTime">
          <div>{{ $moment(startAt).format("YYYY-MM-DD HH:mm") }}</div>
        </div>
        <div id="logme">
          <i class="el-icon-bell"></i>
          <span>小区管理系统</span>
        </div>
      </el-header>
      <el-container id="a2">
        <el-aside style="width: 220px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#222D32"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1-1">
              <router-link
                style="text-decoration: none; color: #fff"
                to="/admin/"
                ><i class="el-icon-s-home"></i>控制台</router-link
              >
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-office-building"></i>
                <span>小区管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/community"
                    >小区列表</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-school"></i>
                <span>房产管理</span>
              </template>

              <el-menu-item index="2-1">
                <router-link
                  style="text-decoration: none; color: #fff"
                  to="/admin/manage"
                  >房产管理</router-link
                >
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link
                  style="text-decoration: none; color: #fff"
                  to="/admin/build"
                  >楼栋管理</router-link
                >
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span>业主管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/owners"
                    >人员管理</router-link
                  >
                </el-menu-item>
                <el-menu-item index="3-2">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/car"
                    >车辆管理</router-link
                  >
                </el-menu-item>
                <el-menu-item index="3-3">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/pet"
                    >宠物管理</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>停车位管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/park"
                    >车位管理</router-link
                  >
                </el-menu-item>
                <el-menu-item index="4-2">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/parkingUse"
                    >车位使用管理</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--
                <el-menu-item index="5-3">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/complaints"
                    >投诉管理</router-link
                  >
                </el-menu-item>
                <el-menu-item index="5-4">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/mail"
                    >信箱管理</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span>资产管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="7-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/assets"
                    >资产设备列表</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-money"></i>
                <span>收费管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="9-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/charge"
                    >收费项目</router-link
                  >
                </el-menu-item>
                <el-menu-item index="9-2">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/detail"
                    >收费明细管理</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-service"></i>
                <span>管理员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="10-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/administrator"
                    >管理员列表</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-menu-item index="10-2">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/users"
                    >用户组管理</router-link
                  >
                </el-menu-item>
                <el-menu-item index="10-3">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/permissions"
                    >权限管理</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="11">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="11-1">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/systemSettings"
                    >系统设置</router-link
                  >
                </el-menu-item>
                <el-menu-item index="11-2">
                  <router-link
                    style="text-decoration: none; color: #fff"
                    to="/admin/personalSettings"
                    >个人设置</router-link
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
            <el-menu-item index="1-1">
              <router-link
                style="text-decoration: none; color: #fff"
                to="/admin/logPrint"
                ><i class="el-icon-edit-outline"></i>日志记录</router-link
              >
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-container id="mymain">
          <el-main id="mymain2">
            <!--  clickMode: -->

            <router-view />
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </div>

    <!-- 模态窗体 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTime: "",
      admin: {
        id: 0,
        adminname: "南瓜",
        img:
          "http://qij47bjgg.hn-bkt.clouddn.com/c576c4a3-7636-41b0-ae42-eccf76e1093f.jpg",
      },
      dialogFormVisible: false, //开关模态窗体的状态
    };
  },
  methods: {
    exit: function () {
      // alert("hello")
      //退出登录，清空token
      this.$message("您已经退出登录");
      localStorage.removeItem("Authentication");
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    upimg() {
      // 显示模态窗体
      this.dialogFormVisible = true;
    },

    handleAvatarSuccess(response, file, fileList) {
      console.log(response);
      this.admin.img = response.data;
      this.$message({
        message: "头像修改成功!",
        type: "success",
      });
    },
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },

  created: function () {
    let adminname2 = localStorage.getItem("adminname");
    if (adminname2 != null) {
      this.admin.adminname = adminname2;
    }
    console.log(this.admin.adminname);
  },
};
</script>
<style scoped>
#madmin .el-aside {
  background-color: #222d32;
  color: #ffffff;
  text-align: center;
  line-height: 200px;
}
#madmin .router-link {
  color: #ffffff;
}
#madmin body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#madmin .router-link {
  /* 链接下划线 空 */
  text-decoration: none;
}
#madmin #mymain2 {
  height: 1000px;
}

#madmin .el-header,
#madmin .el-footer {
  background-color: #222d32;
  color: #eee8e8;
  text-align: center;
  line-height: 60px;
}
#madmin .el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

#madmin body > .el-container {
  margin-bottom: 40px;
}

#madmin .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

#madmin .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#madmin .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
#madmin .el-icon-arrow-down {
  font-size: 12px;
}
#madmin #adminname {
  float: right;
  margin-right: 30px;
  width: 100px;
  height: 50px;
}
#madmin #tousu {
  float: right;
  margin-right: 40px;
}
#madmin #myTime {
  float: right;
  margin-right: 40px;
}
#madmin #logme {
  float: left;
  margin-left: 40px;
  color: #52a4f1;
  font-size: 20px;
}
#touxiang1 {
  float: right;
  width: 44px;
  height: 44px;
}
#madmin .avatar {
  width: 44px;
  height: 44px;
  margin-right: 10px;
  margin-top: 8px;
}
#madmin #touxiang {
  float: right;
  margin-right: 10px;
  margin-top: 8px;
}

</style>
